<template>
  <div class="HorizontalLayout">
    <!-- <el-row :gutter="gutter" style="width: 100%">
      <el-col :span="span[0]">
        <div
          class="HorizontalLayout_left"
          :style="
            color && color[0]
              ? 'background-color:' + color[0]
              : 'background-color:#fff'
          "
        >
          <slot name="left" />
        </div>
      </el-col>
      <el-col :span="span[1]">
        <div class="HorizontalLayout_right">
          <div
            class="HorizontalLayout_right_box"
            :style="
              color && color[1]
                ? 'background-color:' + color[1]
                : 'background-color:#fff'
            "
          >
            <slot name="right" />
          </div>
        </div>
      </el-col>
    </el-row> -->
    <div style="display: flex">
      <div
        class="HorizontalLayout_left"
        :style="
          color && color[0]
            ? 'background-color:' + color[0]
            : 'background-color:#FFFFFF'
        "
      >
        <slot name="left" />
      </div>
      <div class="HorizontalLayout_right" :style="rightPadding ?`padding:${rightPadding}`:'padding: 16px 10px 24px 16px;'">
        <div
          class="HorizontalLayout_right_box"
          :style="
            color && color[1]
              ? 'background-color:' + color[1]
              : 'background-color:#FFFFFF'
          "
        >
          <slot name="right" />
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
const props = defineProps<{
  gutter: number; // 间距
  color: Array<string>; // 左侧背景色
  span: Array<number>; // 标签列表
  rightPadding?:string
}>();
</script>

<style scoped lang="scss">
.HorizontalLayout {
  display: flex;
  width: 100%;
  height: calc(100vh - 48px);

  .HorizontalLayout_left {
    height: 100%;
    width: 280px;
    box-shadow: 10px 0 10px -5px rgba(0, 0, 0, 0.1);
  }
  .HorizontalLayout_right {
    position: relative;
    width: calc(100vw - 285px);
    height: 100%;

    .HorizontalLayout_right_box {
      height: 100%;
      width: 100%;
    }
  }
}
</style>
